<div #chatContent class="chat-content w-full h-full pt-8 flex flex-col relative overflow-x-hidden overflow-y-auto">
  <div class="chat-content-flow w-full md:max-w-3xl mx-auto">
    <div class="w-full p-4 md:p-6 flex rounded-xl bg-gray-50 dark:bg-neutral-900">
      <div class="w-full flex flex-row items-start gap-2 md:gap-4">
        <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-base aspect-square place-items-center">
          <div class="w-full h-full rounded-full relative">
            <img
              alt=""
              loading="lazy"
              width="24"
              height="24"
              decoding="async"
              data-nimg="1"
              class="w-full h-full object-cover rounded-full"
              style="color: transparent"
              src="/assets/images/chatbi.jpg"
            />
          </div>
        </div>
        <div class="flex-1 inline-flex flex-col items-start gap-y-3">
          <div class="w-full flex flex-col items-start">
            <div class="w-full mb-1 font-semibold">
              {{'PAC.KEY_WORDS.Copilot' | translate: {Default: 'Copilot'} }}<span class="text-xs text-violet-500 bg-violet-500/10 px-1.5 py-1 rounded-full m-2">ChatBI</span>
            </div>
            <div class="text-zinc-700 dark:text-zinc-300">
              <p class="mb-1">{{'PAC.ChatBI.SystemMessage_1' | translate: {value: entityType()?.caption || cube() || '', Default: 'Hello, I am the BI copilot of Metad Analytics Cloud. The current dataset is "'+(entityType()?.caption || cube() || 'Empty')+'". You can click the top to switch.'} }}</p>
              <p class="mb-1">{{'PAC.ChatBI.SystemMessage_2' | translate: {Default: 'You can also try clicking on the samples'} }}: 
                @if (examples()?.length > 0) {
                  <a class="cursor-pointer underline" (click)="changeBatch()">{{ 'PAC.ChatBI.AnotherBatch' | translate: {Default: 'Another batch'} }}</a>
                }
              </p>
              @if (examplesLoading()) {
                <pac-chat-loading class="w-10 h-10"/>
              } @else {
                <ul class="list-decimal">
                  @for (example of examples(); track example) {
                    <li class="cursor-pointer my-2" (click)="setExample(example)">
                      <a>{{example}}</a>
                    </li>
                  }
                </ul>
              }
              <div class="w-full my-4 border-b border-b-neutral-300 dark:border-b-neutral-800"></div>
              <p>{{'PAC.ChatBI.SystemMessage_3' | translate: {Default: 'I can accurately identify problems involving time, conditions, dimensions, and indicators.'} }}</p>
              <p style="line-height: 2.2;" [ngClass]="lang()">{{'PAC.ChatBI.SystemMessage_eg' | translate: {Default: 'e.g.'} }} <span class="ngm-chatbi__cond ngm-chatbi__time">{{'PAC.ChatBI.SystemMessage_Year' | translate: {Default: '2023 year'} }}</span> <span class="ngm-chatbi__cond ngm-chatbi__slicer">{{'PAC.ChatBI.SystemMessage_Cloud' | translate: {Default: 'metad analytics cloud BI'} }}</span> <span class="ngm-chatbi__cond ngm-chatbi__dimension">{{'PAC.ChatBI.SystemMessage_Month' | translate: {Default: 'every month'} }}</span> <span class="ngm-chatbi__cond ngm-chatbi__measure">{{'PAC.ChatBI.SystemMessage_Revenue' | translate: {Default: 'revenue'} }}</span> {{'PAC.ChatBI.SystemMessage_HowMuch' | translate: {Default: 'how much'} }}?</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    @for (message of conversation()?.messages; track $index) {
      @switch (message.role) {
        @case ('assistant') {
          <pac-chatbi-answer class="group w-full p-4 md:p-6 mb-4 flex rounded-xl bg-gray-50 dark:bg-neutral-900"
            [message]="message"
            [chatInput]="chatInput"
          />
        }
        @case ('user') {
          <div class="w-full p-4 md:p-6 flex rounded-xl">
            <div class="w-full flex flex-row items-start gap-2 md:gap-4">
              <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-base aspect-square place-items-center overflow-hidden">
                <pac-user-avatar [user]="createdBy()" />
              </div>
              <div class="w-[90%] md:w-auto md:max-w-[90%] inline-flex flex-col items-start gap-y-3">
                <div class="w-full flex flex-col items-start">
                  <div class="w-full mb-1 font-semibold">{{'PAC.KEY_WORDS.You' | translate: {Default: 'You'} }}</div>
                  <div class="w-full"></div>
                  <p class="w-full whitespace-pre-wrap text-base break-words text-zinc-700 dark:text-zinc-300">{{ message.content }}</p>
                </div>
                <div class="flex items-center gap-3">
                  <span class="text-stone-400 text-xs">{{ message.createdAt | date: 'short' }}</span>
                  <button
                    class="p-1 rounded-md text-xs text-stone-500 flex flex-row gap-1 items-center group transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-600"
                    (click)="editQuestion(message)"
                  >
                    <span>
                      <svg
                        aria-hidden="true"
                        viewBox="0 0 1024 1024"
                        class="w-4 fill-stone-500 transition-all duration-300 group-hover:fill-sky-600"
                        preserveAspectRatio="none"
                      >
                        <path
                          fill-rule="evenodd"
                          clip-rule="evenodd"
                          d="M928 896a32 32 0 1 1 0 64h-832a32 32 0 1 1 0-64h832zM784.256 83.2L876.8 175.744c25.6 25.6 25.6 67.008 0 92.544l-498.176 498.24c-7.232 7.168-16 12.608-25.6 15.808l-138.88 46.336a65.472 65.472 0 0 1-82.816-82.816l46.336-138.88c3.2-9.6 8.64-18.368 15.808-25.6L691.712 83.2c25.536-25.6 67.008-25.6 92.544 0z m-118.208 116.096L238.72 626.624a1.472 1.472 0 0 0-0.384 0.64l-46.272 138.816a1.472 1.472 0 0 0 1.856 1.856l138.88-46.272a1.472 1.472 0 0 0 0.576-0.384l427.328-427.328-94.656-94.656z m70.912-70.848l-25.664 25.6 94.656 94.656 25.6-25.6a1.472 1.472 0 0 0 0-2.112l-92.544-92.544a1.472 1.472 0 0 0-2.048 0z"
                        ></path>
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        }
      }
    }
  </div>
</div>

<pac-chatbi-input #chatInput class="w-full py-2 md:pb-4 lg:px-2 flex flex-col sticky bottom-0 left-0"
  [(prompt)]="prompt"
/>
